<template>
  <div class="step-box">
    <div class="form-box">
      <p class="sub-title">个人信息</p>
      <div class="form-item">
        <div class="userinfo-box">
          <img class="user-avatar" :src="userInfo.headImg || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
          <div class="userinfo-detail">
            <p>账号：{{ userInfo.account }}</p>
            <p>绑定手机号：{{ userInfo.mobile }}</p>
            <p>
              <el-button type="text" @click="changePhone">修改手机号</el-button>
              <el-button type="text" @click="changeAvatar">更换头像</el-button>
              <el-button type="text" @click="chnagePassword">修改密码</el-button>
            </p>
          </div>
        </div>
      </div>
    </div>
    <Phone
      v-if="showPhone"
      @close="closeHandle"
      @confirm="confirmPhoneHandle"
    />
    <Avatar
      v-if="showAvatar"
      @close="closeHandle"
      @confirm="confirmAvatarHandle"
    />
    <Password
      v-if="showPassword"
      @close="closeHandle"
      @confirm="confirmPasswordHandle"
    />
  </div>
</template>

<script>
import Phone from './Phone.vue'
import Avatar from './Avatar.vue'
import Password from './Password.vue'

import { editUserMobile, editUserImg, editPassword } from '@/api/system'

export default {
  name: 'Step1',
  components: {
    Avatar,
    Password,
    Phone

  },
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showPhone: false,
      showAvatar: false,
      showPassword: false

    }
  },

  methods: {

    // 修改手机号
    changePhone() {
      this.showPhone = true
    },

    // 更换头像
    changeAvatar() {
      this.showAvatar = true
    },

    // 修改密码
    chnagePassword() {
      this.showPassword = true
    },

    // 关闭
    closeHandle() {
      this.showPhone = false
      this.showAvatar = false
      this.showPassword = false
    },

    // 确认更换手机号
    confirmPhoneHandle(form) {
      const data = {
        ...form,
        id: this.userInfo.id
      }
      editUserMobile(data).then(() => {
        this.$message.success('修改手机号成功')
        this.$emit('update')
        this.showPhone = false
      }).catch(() => {})
    },

    // 确认上传头像
    confirmAvatarHandle(form) {
      const data = {
        ...form,
        id: this.userInfo.id
      }
      editUserImg(data).then(() => {
        this.$emit('update')
        this.showAvatar = false
      }).catch(() => {
      })
    },

    // 确认修改密码
    confirmPasswordHandle(form) {
      const data = {
        ...form,
        id: this.userInfo.id
      }
      editPassword(data).then(() => {
        this.$message.success('修改密码成功')
        this.$emit('update')
        this.showPassword = false
      }).catch(() => {
      })
    }

  }
}
</script>
<style lang="scss" scoped>
@import 'step';
</style>
